<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd 

">
<html>
<head>
 <base href="<%=basePath%>">   
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>测试</title>  
 <link rel="stylesheet" type="text/css" href="<%=path%>/css/bootstrap.min.css" />  
<link rel="stylesheet" type="text/css" href="<%=path%>/css/bootstrap-theme.min.css" />     
<!--  <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">   -->
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	    <!--[if lt IE 9]><!-->
		<script src="http://code.jquery.com/jquery-1.11.3.min.js "></script>
		<!--<![endif]-->
		<!--[if gte IE 9]><!-->
		<script src="https://code.jquery.com/jquery-3.2.1.min.js "></script>
		<!--<![endif]-->
		<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js "></script>

</head>
<script>  
function ajaxSubmit() {  
    $.ajax({  
        type : "post",  
        url : "Servletsql",  
        dataType : "text",  
        success : function(data) {  
            data = eval(data);  
            //构造前先清空源节点  
            document.getElementById("data").innerHTML = "";  
            //设置一个文件碎片  
            var frag = document.createDocumentFragment();  
            //这是表头  
            var tr = document.createElement("tr");   
            frag.appendChild(tr);  
            //利用循环构造表格的每一行，把其放在文件碎片上面  
            for (var i = 0; i < data.length; i++) {  
                tr = document.createElement("tr");  
                tr.innerHTML = "<td>" + data[i].id + "</td>" + "<td>" + data[i].name + "</td>" + "<td>" + data[i].score + "</td>";  
                frag.appendChild(tr);  
            }  
            //此时文件碎片已经是一张表了，直接放网页就可以了 
            document.getElementById("data").appendChild(frag);  
        },  
        error : function() {  
            alert("出错了");  
        }  

    });  
}  
</script> 
<body>
 <div class="container">
	<div class="row clearfix">
		<div class="col-md-12 column">
			<div class="row clearfix">
				<div class="col-md-4 column">
					 <button type="button" onclick="ajaxSubmit()" class="btn btn-default">查询</button>
				</div>
				<div class="col-md-4 column">
					 <button type="button" class="btn btn-default">删除</button>
				</div>
				<div class="col-md-4 column">
					 <button type="button" class="btn btn-default">更改</button>
				</div>
			</div>
			<table class="table table-bordered">
				<thead>
					<tr>
						<th>
							ID
						</th>
						<th>
							Name
						</th>
						<th>
							score
						</th>
					</tr>
				</thead>
				<tbody id="data">	
				</tbody>
			</table>
		</div>
	</div>
</div>
</body>
</html>
